<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<link href='/css/index.css' rel='stylesheet' type='text/css'></link>
<jsp:include page="/inc/easyui_css.jsp"></jsp:include>
</head>
<body>
	<jsp:include page="/inc/nav.jsp" />
	<div id="wrapper">
		<div id="content">
			<div class="video_left">
				<div class="info">
					<div class="hd">
						<h2>羽毛球专家把脉
						<span class="more">
							<div class="easyui-pagination" data-options="
								total: 30,
								showPageList: false,
								showRefresh: false,
								displayMsg: '',
								onSelectPage: function(pageNumber){  
					                getVideo(pageNumber); 
					            }
							"></div>
						</span>
						</h2>
					</div>
					<ul>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_0'></li>
								<li id='title_0'></li>
							</ul>
						</li>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_1'></li>
								<li id='title_1'></li>
							</ul>
						</li>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_2'></li>
								<li id='title_2'></li>
							</ul>
						</li>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_3'></li>
								<li id='title_3'></li>
							</ul>
						</li>
					</ul>
					<ul>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_4'></li>
								<li id='title_4'></li>
							</ul>
						</li>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_5'></li>
								<li id='title_5'></li>
							</ul>
						</li>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_6'></li>
								<li id='title_6'></li>
							</ul>
						</li>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_7'></li>
								<li id='title_7'></li>
							</ul>
						</li>
					</ul>
					<ul>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_8'></li>
								<li id='title_8'></li>
							</ul>
						</li>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_9'></li>
								<li id='title_9'></li>
							</ul>
						</li>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_10'></li>
								<li id='title_10'></li>
							</ul>
						</li>
						<li class="video_l">
							<ul class="video_detial_l">
								<li id='thumb_11'></li>
								<li id='title_11'></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<div id="right">
				<div class="video_list">
					<div class="hd">
						<h2>视频列表
						</h2>
					</div>
					<ul>
						<li class="info_l active">
							<div class="title_l">羽毛球专家把脉</div>
							<div class="title_l">吴迪西羽球教学</div>
						</li>	
					</ul>
				</div>	
				<div class="active_info">
					<div class="hd">
						<h2>视频详情
						</h2>
					</div>
					<ul>
						<li class="info_l active">
							<div class="title_l">羽毛球专家把脉</div>
							<ul class="detail_l">
								<li>&nbsp;&nbsp;&nbsp;&nbsp;本片由羽坛天王赵剑华和前国家女队队员、国际羽联世界羽毛球培训中心主教练、首都体育学院羽毛球运动学教授肖杰两位大师坐镇球场，通过专业示范、细心讲解和多角度演示，专门针对羽毛球运动爱好者实战中的问题和疑惑，进行一对一地把脉诊断，并量身定做一个提高实战技能的运动处方。</li>
								<li>&nbsp;&nbsp;&nbsp;&nbsp;羽毛球专家把脉是一套编排新颖的视频教学资料，比较适合业余羽毛球爱好者尤其是能解决没经过正规培训而又有一定球龄的爱好者的一些顽疾。</li>
							</ul>
						</li>	
					</ul>
				</div>	
			</div>
		</div>
	</div>
	<jsp:include page="/inc/inc_js.jsp"></jsp:include>
	<jsp:include page="/inc/easyui_js.jsp"></jsp:include>
	<script type="text/javascript">
		$(function(){
			getVideo(1);
		});
		var getVideo=function(pageNumber){
			$.ajax({
			    url : "/video/"+pageNumber,
			    dataType : "json",
			    success : function(data) {
			    	for(var i=0;i<9;i++){
			    		$('#thumb_'+i).html('');
			    		$('#title_'+i).html('');
			    	}
			    	var len=data.list.length;
			    	for(var i=0;i<len;i++){
			    		var video=data.list[i];
				    	if(video){
				    		if(video.thumb){
				    			$('#thumb_'+i).html('<a href="/video/video_play.jsp?url='+video.url+'&title='+encodeURI(encodeURI(video.title))+'"><img src="'+video.thumb
						    			+'" onerror="this.src=\'http://g2.ykimg.com/0900641F464A911EDD00000000000000000000-0000-0000-0000-00009197BA80\';"></a>');
				    		}
				    		if(video.title){
				    			$('#title_'+i).html('<a href="/video/video_play.jsp?url='+video.url+'&title='+encodeURI(encodeURI(video.title))+'">'+video.title+'</a>');
				    		}
				    	}
			    	}
			    	if(len<12){
			    		
			    	}
			    },
			    error : function(textStatus) {
			        alert("error");
			    }
			});
		};
	</script>
</body>
</html>
